<template>
  <div class="hy-pagination">
<!--    <el-pagination v-bind="$props" v-model:current-page="currentPageModel" v-model:page-size="pageSizeModel" @size-change="handleSizeChange"-->
<!--                   @current-change="handleCurrentChange"/>-->
    <div>
      总共 {{total}} 条   第 {{currentPageModel}} / {{Math.ceil(total ? total/pageSize : 1)}} 页
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:current-page="currentPageModel"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout=" prev, pager, next,sizes, jumper"
      small
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {ElPagination} from 'element-plus'

console.log(ElPagination)
export default {
  name: "HyPagination",
  props: {
    ...ElPagination.props,
    currentPage: {
      type: [Number, String],
      default: 1
    },
    pageSize: {
      type: [Number, String],
      default: 10
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      },
    },
  },
  computed: {
    currentPageModel: {
      get() {
        return this.currentPage;
      },
      set(val) {
        this.$emit("update:currentPage", val);
      },
    },
    pageSizeModel: {
      get() {
        return this.pageSize;
      },
      set(val) {
        this.$emit("update:pageSize", val);
      },
    },
  },
  methods: {
    handleSizeChange() {
      this.$emit("sizeChange");
    },
    handleCurrentChange() {
      this.$emit("currentChange");
    },
  },
};
</script>

<style lang="less" scoped>
.hy-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
